<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>出错了 - 优选商城</title>
    <style th:fragment="style">
        .error-container {
            padding: 60px 0;
            text-align: center;
        }
        .error-icon {
            font-size: 5rem;
            color: #dc3545;
            margin-bottom: 20px;
        }
        .error-title {
            font-size: 2rem;
            margin-bottom: 20px;
        }
        .error-message {
            font-size: 1.1rem;
            color: #6c757d;
            margin-bottom: 30px;
        }
        .error-details {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            text-align: left;
        }
        .error-details pre {
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container error-container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <i class="bi bi-exclamation-triangle error-icon"></i>
                    <h1 class="error-title">抱歉，出错了！</h1>
                    <p class="error-message" id="errorMessage" th:text="${message != null ? message : '处理请求时出现错误，请稍后再试。'}">处理请求时出现错误，请稍后再试。</p>
                    <div class="d-flex justify-content-center">
                        <a href="/" class="btn btn-primary me-3">返回首页</a>
                        <button class="btn btn-secondary" onclick="window.history.back()">返回上一页</button>
                    </div>
                    
                    <!-- 错误详情 (仅开发环境显示) -->
                    <div class="error-details" th:if="${exception != null}">
                        <h5>错误详情：</h5>
                        <p><strong>URL：</strong> <span th:text="${url != null ? url : '未知'}">未知</span></p>
                        <p><strong>状态：</strong> <span th:text="${status != null ? status : '500'}">500</span></p>
                        <p><strong>异常类型：</strong> <span th:text="${exception.getClass().getName()}">未知异常</span></p>
                        <p><strong>异常信息：</strong> <span th:text="${exception.getMessage()}">无</span></p>
                        <h6>堆栈信息：</h6>
                        <pre th:if="${exception != null}"><code th:text="${#arrays.toString(exception.stackTrace)}"></code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:fragment="script">
        document.addEventListener('DOMContentLoaded', function() {
            var errorMsg = document.getElementById("errorMessage");
            if (errorMsg) {
                console.error("页面出错了: ", errorMsg.textContent);
            }
        });
    </script>
</body>
</html> 